<template>
  <common-list-tabs>
    <common-tabs slot="tabs" v-model="page" @tab-click="tabChange">
      <el-tab-pane label="公告" name="common-public"></el-tab-pane>
      <!-- <el-tab-pane label="通知" name="common-notice"></el-tab-pane> -->
      <el-tab-pane label="告警" name="common-alarm"></el-tab-pane>
    </common-tabs>
    <component
      slot="content"
      :is="page"
      :key="page"
      @change="change"
      :params="params"
    ></component>
  </common-list-tabs>
</template>

<script>
import CommonPublic from "./components/publicNotice.vue";
import CommonNotice from "./components/notice.vue";
import CommonAlarm from "./components/alarm.vue";

export default {
  name: "index",
  data() {
    return {
      page: "common-public",
      params: {},
      currentTab: "1",
    };
  },
  components: {
    CommonPublic,
    CommonNotice,
    CommonAlarm,
  },

  watch: {
    $route: function() {
      this.getCurrentTab();
    },
  },

  mounted(){
    this.getCurrentTab();
  },

  methods: {
    getCurrentTab() {
      this.currentTab = this.$route.query.currentTab || "";
      if (this.currentTab === "2") {
        this.page = "common-notice";
      } else if (this.currentTab === "3") {
        this.page = "common-alarm";
      } else {
        this.page = "common-public";
      }
      this.tabChange();
    },
    change(to, params) {
      this.params = params;
      this.page = `common-${to}`;
    },
    tabChange() {
      this.params = {};
    },
  },
};
</script>

<style scoped lang="scss">
</style>
